<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IntersectionObserver原生介绍</title>
    <style>
      .box {
        height: 3000px;
        width: 200px;
        background-color: #8df;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>

    <!-- 图片进入可视区才加载 -->
    <!-- 本质： 图片懒加载效果是需要知道图片是否在可视区的！！ 不在可视区，不需要给src -->
    <!-- src="http://geek.itheima.net/resources/images/38.jpg" -->
    <img alt="" />

    <script>
      const img = document.querySelector('img')

      const observer = new IntersectionObserver((arr) => {
        console.log(11)
        // 进入可视区、离开可视区会自动触发该函数
        // console.log(arr[0])
        // arr 是个数组， 有所有被监视的元素信息对象
        if (arr[0].isIntersecting) {
          // console.log('img进入可视区了')
          img.src = 'http://geek.itheima.net/resources/images/38.jpg'

          observer.disconnect() // 移除监听
        }
      })

      observer.observe(img) // 监听元素
    </script>
  </body>
</html>
